<script>
//导入员工信息存储的容器
import {useEmpStore} from '@/stores/emp.js';

export default {
  name: "Main",
  data(){
    return {
      dialogVisible: false,
      empName: '',//员工名称
      avatar: '',//头像
    }
  },
  methods:{
    //打开个人信息页面
    toPersonal(){
      this.$router.push('/main/my')
    },
    //修改密码
    updatePwd(){
      this.$router.push('/main/updatePwd')
    },
    //退出系统
    logout(){
      this.dialogVisible = false;
      localStorage.clear()
     this.$router.push('/login');
    }

  },
  //生命周期,页面加载时，就要获取数据，方便后面数据渲染
  mounted() {
    //获取容器
    let empStore = useEmpStore();
    console.log('名称：',empStore.empName);
    this.empName = empStore.empName
    console.log('头像：',empStore.avatar)
    this.avatar = empStore.avatar
  }
}
</script>

<template>
  <div >
    <el-container>
      <el-header class="my_header">
          <h3><img alt="" src="@/assets/logo.svg" width="5%"/>&nbsp;充电桩运营管理</h3>
          <div class="header_right">
            <el-space :size="20">
              <el-icon color="#FFF" size="24" class="nav-item" @click="this.$router.push('/main')"><Monitor /></el-icon>
                <el-badge :value="12" class="item">
                <el-icon color="#FFF" size="24" class="nav-item"><Message /></el-icon>
              </el-badge>
              <el-icon color="#FFF" size="24" class="nav-item" @click="this.dialogVisible = true"><SwitchButton /></el-icon>

              <el-dropdown v-if="avatar===''" placement="bottom-end" trigger="click">
                <el-avatar icon="UserFilled"  :title="empName" />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="toPersonal"><span class="personal">个人信息</span></el-dropdown-item>
                    <el-dropdown-item @click="updatePwd"><span class="personal">修改密码</span></el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-dropdown v-if="avatar!==''" placement="bottom-end" trigger="click">
                <el-avatar else  :src="avatar"  :title="empName" />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="toPersonal"><span class="personal">个人信息</span></el-dropdown-item>
                    <el-dropdown-item @click="updatePwd"><span class="personal">修改密码</span></el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-space>
          </div>
        <!-- 退出系统的提示框        -->
        <el-dialog
            v-model="dialogVisible"
            title="退出确认"
            width="500"
            destroy-on-close
        >
          <span>你确定要退出系统登录吗?</span>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="logout">
                确定
              </el-button>
            </div>
          </template>
        </el-dialog>
      </el-header>
      <el-container>
        <el-aside class="my_aside" width="200px">
          <el-menu router>
            <el-menu-item index="1"><el-icon><House /></el-icon><span>首页</span></el-menu-item>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><CameraFilled /></el-icon>
                <span>实时监控</span>
              </template>
                <el-menu-item index="2-1">实时监控</el-menu-item>
                <el-menu-item index="2-2">设备状态</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><Histogram /></el-icon>
                <span>站桩管理</span>
              </template>
              <el-menu-item index="3-1">充电站管理</el-menu-item>
              <el-menu-item index="3-2">充电桩管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon><TrendCharts /></el-icon>
                <span>运营管理</span>
              </template>
              <el-menu-item index="4-1">充点卡管理</el-menu-item>
              <el-menu-item index="4-2">共享管理</el-menu-item>
              <el-menu-item index="4-3">预约管理</el-menu-item>
              <el-menu-item index="4-4">计费规则</el-menu-item>
              <el-menu-item index="4-5">客户管理</el-menu-item>
              <el-menu-item index="4-6">车辆管理</el-menu-item><el-icon><Document /></el-icon>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="5-1">充电记录</el-menu-item>
              <el-menu-item index="5-2">交易流水</el-menu-item>
              <el-menu-item index="5-3">充值记录</el-menu-item>
              <el-menu-item index="5-4">结账记录</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="6">
              <template #title>
                <el-icon><WarningFilled /></el-icon>
                <span>报警管理</span>
              </template>
              <el-menu-item index="6-1">报警设置</el-menu-item>
              <el-menu-item index="6-2">报警信息</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="7">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>运维管理</span>
              </template>
              <el-menu-item index="7-1">任务管理</el-menu-item>
              <el-menu-item index="7-2">运维人员</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="8">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>分析报表</span>
              </template>
              <el-menu-item index="8-1">运营分析</el-menu-item>
              <el-menu-item index="8-2">客户分析</el-menu-item>
              <el-menu-item index="8-3">故障分析</el-menu-item>
              <el-menu-item index="8-4">能耗报表</el-menu-item>
              <el-menu-item index="8-4">财务报表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="9">
              <template #title>
                <el-icon><Operation /></el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="9-1">部门管理</el-menu-item>
              <el-menu-item index="9-2" :route="{path:'/main/emp'}">员工管理</el-menu-item>
              <el-menu-item index="9-3">角色管理</el-menu-item>
              <el-menu-item index="9-4">系统日志</el-menu-item>
            </el-sub-menu>
          </el-menu>

        </el-aside>
        <el-main>
          <RouterView/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.my_header{
  background: linear-gradient(.25turn, #4593FC, 10%, #29CBDA);
  display:flex;
  justify-content: space-between;
  margin:0;
}
.my_header h3{
  color:#FFF;
}
/*头部的右边区域*/
.header_right{
  display: flex;
}
.header_right .nav-item:hover{
    cursor: pointer;
}
/*下拉菜单*/
.personal{
  font-size: 12px;
}

/*侧边栏*/
.el-menu{
  /*去掉菜单右边的竖线*/
  border-right:none;
}
.my_aside{
  /*右边的那根竖线*/
  border-right:1px solid #ccc;
  height:100vh;
}
</style>